<!DOCTYPE html>
<html>
    <head>
        <style>
            #box1{
                width:200px;
                height:200px;
                background-color: yellow;
                display:flex;/*将当前元素设置为弹性布局*/
            }
            #box1 div{
                width:50px;
                height:50px;
                background-color: blue;
                color:white;
                font-size:20px;
            }
           
            #box2{
                width:200px;
                height:200px;
                background-color: yellow;
                display:flex;/*将当前元素设置为弹性布局*/
            }
            #box2 div{
                width:30px;
                height:50px;
                background-color: blue;
                color:white;
                font-size:20px;
            }
            #box3{
                width:200px;
                height:200px;
                background-color: yellow;
                display:flex;/*将当前元素设置为弹性布局*/
            }
            #box3 div{
                width:70px;
                height:50px;
                background-color: blue;
                color:white;
                font-size:20px;
            }
            #box4{
                width:200px;
                height:200px;
                background-color: yellow;
                display:flex;/*将当前元素设置为弹性布局*/
            }
            #box4 div{
                width:50px;
                height:50px;
                background-color: blue;
                color:white;
                font-size:20px;
            }
        </style>
    </head>

    <body>
        <div id="box1">
            <div class="item1" style="order: 3;">1</div>
            <div class="item2" style="order: 1;">2</div>
            <div class="item3" style="order: 4;">3</div>
            <div class="item4" style="order:2">4</div>
        </div>
        <br/><br/>
        <div id="box2">
            <div class="item1" style="flex-grow: 1;background-color: red;">1</div>
            <div class="item2">2</div>
            <div class="item3" style="background-color: green;">3</div>
            <div class="item4">4</div>
        </div>
        <br/><br/>
        <div id="box3">
            <div class="item1" style="flex-shrink: 0;background-color: red;">1</div>
            <div class="item2">2</div>
            <div class="item3" style="background-color: green;">3</div>
            <div class="item4">4</div>
        </div>
        <br/><br/>
        <div id="box4">
            <div class="item1" style="background-color: red;">1</div>
            <div class="item2">2</div>
            <div class="item3" style="background-color: green; flex-basis: 100px;">3</div>
            <div class="item4">4</div>
        </div>
        <br/><br/>
    </body>
</html>